{% extends 'base.html' %}

{% block title %}搜索结果 - {{ query }}{% endblock %}

{% block content %}
    <style>
        /* 复用 index.html 的样式变量 */
        :root {
            --primary-blue: #524eef;
            --text-gray: #6D6D6D;
            --accent-yellow: #FFF8E5;
            --accent-purple: #E8E6F9;
        }

        body {
            background: -webkit-linear-gradient(top,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            background: linear-gradient(to bottom,
                    #ffffff 0%,
                    #fffede 33%,
                    #cdccff 66%,
                    #524eef 100%);
            min-height: 100vh;
            padding-bottom: 12%;
        }


        .nlp-btn {
            background: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 25px;
            font-size: 16px;
            white-space: nowrap;
            cursor: pointer;
            transition: opacity 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .nlp-btn:hover {
            opacity: 0.9;
            color: white;
        }
    </style>

    
    {% if words %}
        
        <ul style="list-style-type: none; padding-left: 0;">
            {% for a in words %}
                {% for word in a %}
                    <li style="margin-top:10%; margin-bottom: 10%;">
                        <a href="{% url 'word_detail' word.id %}" class="nlp-btn">{{ word.word }} - 等级: {{ word.get_level_display }}</a>
                    </li>
                {% endfor %}
            {% endfor %}
        </ul>
    {% endif %}
    {% if terms %}
        
        <ul style="list-style-type: none; padding-left: 0;">
            {% for b in terms %}
                {% for term in b %}
                    <li style="margin-bottom: 10%;">
                        <a href="{% url 'term_detail' term.id %}" class="nlp-btn">{{ term.term_name }}</a>
                    </li>
                {% endfor %}
            {% endfor %}
        </ul>
    {% endif %}
    {% if not words and not terms %}
        <p class="text-center">未找到相关结果。</p>
    {% endif %}
{% endblock %}